<template>
  <div class="wrapper">
    <div class="head">
      <view class="uni-padding-wrap">
        <view class="page-section swiper">
          <view class="page-section-spacing">
            <swiper
              class="swiper"
              :indicator-dots="indicatorDots"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration"
            >
              <swiper-item
                v-for="(item, index) in HouseDetail.file"
                :key="index"
              >
                <view class="swiper-item uni-bg-red"
                  ><img :src="item.url" alt=""
                /></view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
      <div class="houseDetail">
        <h4>{{ HouseDetail.title }}</h4>
        <p class="spans">
          <span>{{ HouseDetail.price }}</span
          ><span>{{ HouseDetail.room }}室{{ HouseDetail.living_room }}厅</span
          ><span>{{ HouseDetail.acreage }}</span>
        </p>
        <h3>房屋信息</h3>
        <div class="advantage">
          <p class="prices">
            <span>单价</span><span>朝向</span><span>装修</span>
          </p>
          <p>
            <span>{{ HouseDetail.average_price }}</span
            ><span>{{ HouseDetail.orientations }}</span
            ><span>精装修</span>
          </p>
        </div>
      </div>
      <div class="recommend">
        <h3>推荐房源</h3>
        <dl
          v-for="item in HouseDetail.near"
          :key="item.id"
          @click="toDetail(item.id)"
        >
          <dt><img :src="item.img" alt="" /></dt>
          <dd>
            <h3>{{ item.title }}</h3>
            <p class="detail">
              <span>{{ item.acreage }}</span
              >/ <span>{{ item.room }}室{{ item.living_room }}厅</span>/
              <span>{{ item.city }}</span>
            </p>

            <p>
              <span class="price">{{ item.price }}</span>
            </p>

            <p>
              <span class="xiao">小区</span>
            </p>
          </dd>
        </dl>
      </div>
    </div>
    <div class="foote">
      <div></div>
      <div class="right">
        <span class="di">地图导航</span>
        <span class="zai">在线咨询</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getRentingDetail } from "../../server";
export default {
  data() {
    return {
      goodId: "",
      HouseDetail: {},
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
    };
  },
  onLoad(option) {
    //option为object类型，会序列化上个页面传递的参数
    console.log(option.id); //打印出上个页面传递的参数。
    if (option.id) {
      this.goodId = option.id;
    }
  },
  async onShow() {
    let res = await getRentingDetail(this.goodId);
    console.log(res.data);
    if (res.code == 200) {
      this.HouseDetail = res.data;
    }
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.head {
  padding-bottom: 150rpx;
}
.foote {
  width: 100%;
  height: 120rpx;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .right {
    height: 120rpx;
    span {
      display: inline-block;
      height: 100%;
      color: #fff;
      text-align: center;
      line-height: 120rpx;
    }
    .di {
      display: inline-block;
      width: 250rpx;
      background-color: #9acd32;
    }
    .zai {
      display: inline-block;
      width: 200rpx;
      background-color: #663399;
    }
  }
}
.uni-padding-wrap,
.page-section,
.page-section-spacing,
.swiper,
.swiper-item,
img {
  width: 100%;
  height: 500rpx;
}
.houseDetail {
  width: 94%;
  margin-left: 3%;
  h4 {
    font-size: 40rpx;
    margin-top: 20rpx;
  }
  .spans {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    color: red;
    span {
      margin-right: 40rpx;
      font-weight: 600;
      font-size: 30rpx;
    }
  }
  h3 {
    font-weight: 800;
    font-size: 40rpx;
  }
  .advantage {
    width: 100%;
    height: 150rpx;

    p {
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        width: 240rpx;
        height: 60rpx;
        line-height: 60rpx;
      }
    }
    .prices {
      color: #999;
    }
  }
}
.recommend {
  width: 94%;
  margin-left: 3%;
  h3 {
    font-weight: 800;
    font-size: 40rpx;
  }
  dl {
    width: 100%;
    height: 300rpx;
    display: flex;
    border-bottom: 1px solid #eee;

    dt {
      width: 300rpx;
      height: 200rpx;
      padding-top: 60rpx;
      img {
        width: 300rpx;
        height: 200rpx;
      }
    }
    dd {
      padding-top: 60rpx;
      padding-left: 20rpx;
      h3 {
        font-weight: 700;
        font-size: 35rpx;
      }
      .detail {
        font-size: 28rpx;
        color: #333;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
      }

      .price {
        font-weight: 600;
        color: #ff9900;
      }
      .xiao {
        display: inline-block;
        width: 80rpx;
        height: 40rpx;
        font-size: 25rpx;
        text-align: center;
        line-height: 40rpx;
        background-color: #eee;
        margin-top: 10rpx;
      }
    }
  }
}
</style>